<template>
 <div id='header'>
	 <!-- iview 一行两列 -->
	 <Row type='flex'>
		 <Col :xl='5' :lg='5' :md='4' :sm='4' :xs='4' order='1'>
			 <div class="logo">
				 <img src="../assets/logo.png" alt="Logo"/>
				 <p>一仙</p>
			 </div>
		 </Col>
		 <Col :xl='4' :lg='4' :md='4' :sm='4' :xs='4' order='2'>
		 			 <div class="search">
		 				 <Input placeholder="搜索博客..." style="width: 20vw;height: auto;">
		 				    <Icon type="ios-search" slot="suffix" />
		 				</Input>
		 			 </div>
		 </Col>
		 <Col :xl='3' :lg='3' :md='2' :sm='1' :xs='1' order='1'>
			 <div class="logo">
				 
			 </div>
		 </Col>
		 <Col :xl='12' :lg='12' :md='14' :sm='15' :xs='16' order='2'>
			 <div class="menu">
				 <a v-for="(item,index) in menuList" :key='index' @click="goPage(item.path)">
					<Icon :type="item.icon" /> 
					{{item.name}}
				 </a>
			 </div>
		 </Col>
		 <!-- <Col :xl='4' :lg='4' :md='4' :sm='4' :xs='4' order='2'>
			 <div class="search">
				 <Input placeholder="搜索博客..." style="width: auto">
				    <Icon type="ios-search" slot="suffix" />
				</Input>
			 </div>
		 </Col> -->
	 </Row>
 </div>
</template>

<script>
export default {
  name: 'Header',
  data() {
      return {
		menuList:[
			{name:"首页",icon:'md-home',path:'/'},
			{name:"博客",icon:'ios-bookmarks-outline',path:'/blog'},
			{name:"留言板",icon:'ios-create',path:'/review'},
			{name:"个人中心",icon:'md-person',path:'/my'},
			{name:"登录/注册",icon:'md-contact',path:'/login'},
			{name:"GitHub",icon:'logo-github',path:'https://github.com/JX520'},
		]
    };
  },
  components:{
    
  },
  mounted() {
    
  },
  methods:{
    goPage(path){
		if(path == 'https://github.com/JX520'){
			return window.open(path)
		}
		this.$router.push(path)
	}
  },
  computed: {
    
  }
}
</script>

<style lang="less" scoped>
#header{
	.logo{
		width: 100%;
		height: 3.5vw;
		// border: 1px solid red;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background-color: rgb(81, 90, 110);
		img{
			width: 3vw;
			height: 3vw;
		}
		p{
			font-size: 1.5rem;
			margin-left: 1vw;
			letter-spacing: 0.125rem;
			color: whitesmoke;
		}
	}
	.menu{
		width: 100%;
		height: 3.5vw;
		display: flex;
		align-items:center;
		justify-content: center;
		// border: 1px solid red;
		background-color: rgb(81, 90, 110);
		a {
			color: #f2f2f2;
			margin-right: 1vw;
			font-size: 1rem;
			padding: 0.2vw;
			
		}
		a:hover{
			background-color:#222;
			border-radius: 0.3125rem;
			color: lightblue;
		}
	}
	.search{
		width: 100%;
		height: 3.5vw;
		display: flex;
		align-items: center;
		justify-content: center;
		// border: 1px solid red;
		background-color: rgb(81, 90, 110);
		input{
			background-color: rgb(81, 90, 110);;
		}
	}
}
</style>
